<template>
	<view>
		<!-- 优惠劵颜色选择 -->
		<view class="setting-item">
			<text class="customColor color1" :class="colorID==1?'selected':''" data-id='1' @click="Choice"></text>
			<text class="customColor color2" :class="colorID==2?'selected':''" data-id='2' @click="Choice"></text>
			<text class="customColor color3" :class="colorID==3?'selected':''" data-id='3' @click="Choice"></text>
			<text class="customColor color4" :class="colorID==4?'selected':''" data-id='4' @click="Choice"></text>
			<text class="customColor color5" :class="colorID==5?'selected':''" data-id='5' @click="Choice"></text>
			<text class="customColor color6" :class="colorID==6?'selected':''" data-id='6' @click="Choice"></text>
			<text class="customColor color7" :class="colorID==7?'selected':''" data-id='7' @click="Choice"></text>
		</view>
		<!-- 优惠劵模板 -->
		<view class="couponContainer">
			<view class="coupon-wrapper marginRight" :class="colorName">
				<view class="leftContainer">
					<text class="priceSign">￥</text>
					<text class="couponPrice">20</text>
				</view>
				<text class="couponCondition">20现金优惠劵</text>
				<text class="splitLine"></text>
				<text class="receiveCoupon">立即领取</text>
			</view>
			<view class="coupon-wrapper" :class="colorName">
				<view class="leftContainer">
					<text class="priceSign">￥</text>
					<text class="couponPrice">10</text>
				</view>
				<text class="couponCondition">10现金优惠劵</text>
				<text class="splitLine"></text>
				<text class="receiveCoupon">立即领取</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex';
	export default {
		name: 'choice-color',
		props:{
			//优惠劵列表
			couponList:{
				type: Array,
				default: ()=>[]
			}
		},
		data() {
			return {
				colorID: 1,
				colorName: 'couponBgColor1',
			};
		},
		watch:{
			colorID(){
				this.$emit('onChoice',this.colorID);
			}
		},
		methods:{
			...mapMutations(['modifyColor']),
			// 颜色选择
			Choice(e){
				console.log(e);
				this.colorID = e.target.dataset.id;
				switch(this.colorID){
					case '1':
						this.colorName = 'couponBgColor1';
						this.modifyColor('#e15852');
						break;
					case '2':
						this.colorName = 'couponBgColor2';
						this.modifyColor('#e7c178');
						break;
					case '3':
						this.colorName = 'couponBgColor3';
						this.modifyColor('#f39c33');
						break;
					case '4':
						this.colorName = 'couponBgColor4';
						this.modifyColor('#3c95fd');
						break;
					case '5':
						this.colorName = 'couponBgColor5';
						this.modifyColor('linear-gradient(left,#75c1ff 0,#3a97ff 100%)');
						break;
					case '6':
						this.colorName = 'couponBgColor6';
						this.modifyColor('linear-gradient(left,#ffba64 0,#fe8b48 100%)');
						break;
					case '7':
						this.colorName = 'couponBgColor7';
						this.modifyColor('linear-gradient(left,#fe8864 0,#fe434c 100%)');
						break;
				}
			},
		},
	}
</script>

<style lang="scss">
	.setting-item {
	    // margin-bottom: 20px;
	    // -webkit-box-align: center;
	    // -ms-flex-align: center;
	    align-items: center;
		margin-left: 148upx;
		padding-left: 6upx;
		overflow: hidden;
		clear: both;
		.customColor {
		    display: inline-block;
		    width: 36upx;
		    height: 36upx;
		    margin-right: 14upx;
		    border-radius: 100%;
		    cursor: pointer;
		    margin-top: 4upx;
		};
		.color1 {
		    background-color: #e15852;
		};
		.color2 {
		    background-color: #e7c178;
		};
		.color3 {
		    background-color: #f39c33;
		};
		.color4 {
		    background-color: #3c95fd;
		};
		.color5 {
			// background: -webkit-gradient(linear,left top,right top,from(#75c1ff),to(#3a97ff));
			background: linear-gradient(left,#75c1ff,#3a97ff);
			// background: -ms-linear-gradient(left,#75c1ff 0,#3a97ff 100%);
		};
		.color6 {
		    // background: -webkit-gradient(linear,left top,right top,from(#ffba64),to(#fe8b48));
			background: linear-gradient(left,#ffba64,#fe8b48);
			// background: -ms-linear-gradient(left,#ffba64 0,#fe8b48 100%);
		};
		.color7 {
		    // background: -webkit-gradient(linear,left top,right top,from(#fe8864),to(#fe434c));
			background: linear-gradient(left,#fe8864,#fe434c);
			// background: -ms-linear-gradient(left,#fe8864 0,#fe434c 100%);
		};
		.selected {
		    border-radius: 5px;
		    transform: rotate(45deg);
		    -ms-transform: rotate(45deg);
		    -moz-transform: rotate(45deg);
		    -webkit-transform: rotate(45deg);
		    -o-transform: rotate(45deg);
		}
	}
	.couponContainer {
		overflow: hidden;
		padding: 30upx;
		display: flex;
		flex-wrap: wrap;
		.marginRight{
			margin-right: 20upx;
		}
		.coupon-wrapper {
			width: 334upx;
			height: 164upx;
			float: left;
			border-radius: 6upx;
			position: relative;
		}
		.leftContainer {
			width: 258upx;
			float: left;
			text-align: center;
			padding-top: 40upx;
			.priceSign {
				color: #fff;
				font-size: 12px;
				line-height: 24upx;
				display: inline-block;
				vertical-align: top;
			}
			.couponPrice {
				color: #fff;
				font-size: 25px;
				display: inline-block;
				line-height: 46upx;
			}
		}
		.couponCondition {
			position: absolute;
			top: 90upx;
			left: 0;
			font-size: 12px;
			width: 258upx;
			text-align: center;
			color: rgba(255,255,255,.5);
		}
		.splitLine {
			height: 118upx;
			top: 22upx;
			left: 258upx;
			width: 2upx;
			border: 2upx dashed rgba(255,255,255,.3);
			position: absolute;
		}
		.receiveCoupon {
			float: right;
			height: 164upx;
			writing-mode: tb-rl;
			line-height: 76upx;
			font-size: 12px;
			text-align: center;
			color: rgba(255,255,255,.5);
			letter-spacing: 2upx;
		}
		//优惠劵背景颜色
		.couponBgColor1 {
		    background-image: radial-gradient(circle at 9px 8px ,transparent 0,transparent 8px,#e15852 8px,#e15852 100%);
		    background-position: 121px -8px;
		    background-size: 100% 83px;
		}
		.couponBgColor2 {
		    background-image: radial-gradient(circle at 9px 8px ,transparent 0,transparent 8px,#e7c178 8px,#e7c178 100%);
		    background-position: 121px -8px;
		    background-size: 100% 83px;
		}
		.couponBgColor3 {
		    background-image: radial-gradient(circle at 9px 8px ,transparent 0,transparent 8px,#f39c33 8px,#f39c33 100%);
		    background-position: 121px -8px;
		    background-size: 100% 83px;
		}
		.couponBgColor4 {
		    background-image: radial-gradient(circle at 9px 8px ,transparent 0,transparent 8px,#3c95fd 8px,#3c95fd 100%);
		    background-position: 121px -8px;
		    background-size: 100% 83px;
		}
		.couponBgColor5 {
		    background: -webkit-gradient(linear,left top,right top,from(#75c1ff),to(#46a0ff)),radial-gradient(circle at 11px 4px,transparent 6px,#46a0ff 6px) top left,radial-gradient(circle at 10px 56px,transparent 6px,#46a0ff 6px) bottom left,-webkit-gradient(linear,left top,right top,from(#46a0ff),to(#3a97ff));
		    background: linear-gradient(.25turn,#75c1ff,#46a0ff),radial-gradient(circle at 11px 4px,transparent 6px,#46a0ff 6px) top left,radial-gradient(circle at 10px 56px,transparent 6px,#46a0ff 6px) bottom left,linear-gradient(.25turn,#46a0ff,#3a97ff);
		    background-size: 120px 82px,20px 50px,20px 57px,32px 84px;
		    background-repeat: no-repeat;
		    background-position: 0 0,120px -4px,120px 26px,140px 0;
		}
		.couponBgColor6 {
		    background: -webkit-gradient(linear,left top,right top,from(#ffba64),to(#fe954e)),radial-gradient(circle at 11px 4px,transparent 6px,#fe954e 6px) top left,radial-gradient(circle at 10px 56px,transparent 6px,#fe954e 6px) bottom left,-webkit-gradient(linear,left top,right top,from(#fe954e),to(#fe8b48));
		    background: linear-gradient(.25turn,#ffba64,#fe954e),radial-gradient(circle at 11px 4px,transparent 6px,#fe954e 6px) top left,radial-gradient(circle at 10px 56px,transparent 6px,#fe954e 6px) bottom left,linear-gradient(.25turn,#fe954e,#fe8b48);
		    background-size: 120px 82px,20px 50px,20px 57px,32px 84px;
		    background-repeat: no-repeat;
		    background-position: 0 0,120px -4px,120px 26px,140px 0;
		}
		.couponBgColor7 {
		    background: -webkit-gradient(linear,left top,right top,from(#fe8864),to(#fe5151)),radial-gradient(circle at 11px 4px,transparent 6px,#fe5151 6px) top left,radial-gradient(circle at 10px 56px,transparent 6px,#fe5151 6px) bottom left,-webkit-gradient(linear,left top,right top,from(#fe5151),to(#fe434c));
		    background: linear-gradient(.25turn,#fe8864,#fe5151),radial-gradient(circle at 11px 4px,transparent 6px,#fe5151 6px) top left,radial-gradient(circle at 10px 56px,transparent 6px,#fe5151 6px) bottom left,linear-gradient(.25turn,#fe5151,#fe434c);
		    background-size: 120px 82px,20px 50px,20px 57px,32px 84px;
		    background-repeat: no-repeat;
		    background-position: 0 0,120px -4px,120px 26px,140px 0;
		}
	}
</style>
